import React, { useState } from 'react'
import { useEffect } from 'react';
import PubSub from 'pubsub-js';
import axios from 'axios';
import {Link} from 'react-router-dom';
//1. 导入
import {useNavigate} from 'react-router-dom'; //navigate 导航

export default function HeroList() {
  //声明状态  保存英雄数据
  let [heros, setHeros] = useState([]);
  //声明状态 表明是否为第一次显示结构
  let [isFirst, setIsFirst] = useState(true);
  //声明状态 表示是否正在加载中
  let [loading, setLoading] = useState(false);
  //2. 调用 useNavigate 获得跳转函数
  let navigate = useNavigate();

  //声明频道的订阅
  useEffect(() => {
    //订阅
    PubSub.subscribe('keyword', async (_, data) => {
      //将 isFirst 改为 false
      setIsFirst(false);
      setLoading(true);
      //清空英雄数据
      setHeros([]);
      //根据关键字, 发送 AJAX 请求, 获取对应的英雄数据
      // http://api.xiaohigh.com/heros?name_like=%E6%9D%8E
      let result = await axios.get('http://api.xiaohigh.com/heros', {
        params: {
          name_like: data
        }
      });
      setLoading(false);
      //更新英雄列表的状态
      setHeros(result.data);
    });

    //取消订阅
    return () => {
      //取消订阅
      PubSub.unsubscribe('keyword');
    }
  }, [])

  return (
    <div className="hero-list">
      {/* 欢迎界面提醒 */}
      {isFirst && <h3 className='center'>欢迎来到王者荣耀~~</h3>}
      {/* 空状态提醒 */}
      {heros.length === 0 && !isFirst && !loading && <h3 className='center'>暂无数据</h3>}
      {/* 正在加载中的状态 */}
      {loading && <h3 className="center">搜索中....</h3>}
      {/* 列表渲染 */}
      {
        heros.map(item => {
          return <div className="item" key={item.id}>
                    <img
                      onClick={() => {
                        //3. 无刷新跳转
                        // navigate(`/hero/${item.id}`); // params 传参
                        // navigate(`/hero?id=${item.id}`); // query 传参
                        navigate('/hero', {
                          //替换模式   location.replace
                          replace: false,
                          // state 传参
                          state: {
                            id: item.id,
                          }
                        })
                      }}
                      src={"http://cdn.xiaohigh.com" + item.image} alt="" />
                    <p>{item.name}</p>
                  </div>
        })
      }
    </div>
  )
}
